<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表格</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="table">
  <h4><p> 给表格的class写上 table-hover 类启用表格中 tbody 上的行的悬停效果：</p></h4>

<!--
table 	         为任意 <table> 添加基本样式 (只有横向分隔线)
table-striped	  在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
table-bordered	  为所有表格的单元格添加边框
table-hover	      在 <tbody> 内的任一行启用鼠标悬停状态
table-condensed	  让表格更加紧凑
-->
  <table class=" ">
  <thead>
    <tr class="">
      <th>序号</th>
      <th>名字</th>
    </tr>
    </thead>
    <tbody>
    <tr class="">
      <td>1</td>
      <td>赵一</td>
    </tr>
    <tr>
      <td>2</td>
      <td>刘二</td>
    </tr>
    <tr>
      <td>3</td>
      <td>张三</td>
    </tr>
    <tr>
      <td>4</td>
      <td>李四</td>
    </tr>
    <tr>
      <td>5</td>
      <td>王五</td>
    </tr>
    <tr>
      <td>6</td>
      <td>钱六</td>
    </tr>
    <tr class=" ">
      <td>7</td>
      <td>周七</td>
    </tr>
    </tbody>
  </table>
<!--
active	对某一特定的行或单元格应用悬停颜色
success	表示一个成功的或积极的动作
warning	表示一个需要注意的警告
danger	表示一个危险的或潜在的负面动作
  -->
</div>

</body>
</html>